<template>
  <div class="usenum">开启人数/使用人数：254/240</div>
  <div class="info_box">
    <div class="item">
      <img src="../../assets/images/useimages/screen_people_icon.png" alt="" />
      <p class="num">12999</p>
      <p class="text">企业总人数</p>
    </div>
    <div class="item">
      <img src="../../assets/images/useimages/screen_-admini_icon.png" alt="" />
      <p class="num">3</p>
      <p class="text">管理员数量</p>
    </div>
    <div class="item">
      <img src="../../assets/images/useimages/screen_time_icon.png" alt="" />
      <p class="num">254423</p>
      <p class="text">总学时(分钟)</p>
    </div>
    <div class="item">
      <img src="../../assets/images/useimages/screen_average_icon.png" alt="" />
      <p class="num">4423</p>
      <p class="text">人均学时(分钟)</p>
    </div>
    <div class="item">
      <img src="../../assets/images/useimages/screen_subject_icon.png" alt="" />
      <p class="num">208</p>
      <p class="text">题目总数</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "CompanyInfo",
  setup() {
    return {
    };
  },
};
</script>

<style lang="scss" scoped>
.usenum {
  color: #68b6ff;
  font: 400 12px "思源黑体";
  line-height: 30px;
}
.info_box {
  height: 140px;
  width: 100%;
  box-sizing: border-box;
  padding: 28px 0;
  background: rgba(11, 31, 81, 0.8);
  display: flex;
  justify-content: space-around;
  .item {
    width: 110px;
    height: 100%;
    overflow: hidden;
    img {
      width: 34px;
    }
    .num {
      color: #fff;
      font: 400 18px "思源黑体";
      margin: 0 0 5px 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .text {
      color: rgba($color: #fff, $alpha: 0.5);
      font: 400 12px "思源黑体";
      margin: 0;
    }
  }
}
</style>